<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>animatecss动画库的使用,vue中同时使用动画和过渡</title>
	<style>
		@import url("css/animate.css");
		/*自定义过渡动画*/
		.fade-enter,.fade-leave-to{ /*进入前和离开前*/
          opacity: 0;
		}
		.fade-enter-active,.fade-leave-active{ /*进入后和离开后*/
		  transition: opacity 3s;
		  -webkit-transition: opacity 3s;
		}
	</style>
	<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
	<transition
			name="fade"
			:duration="{enter:5000,leave:10000}"
			appear
			enter-active-class="animated wobble fade-enter-active"
			leave-active-class="animated swing fade-leave-active"
			appear-active-class="animated bounceIn"
	>
		<div v-show="seen">hello world</div>
	</transition>
	<button @click="handleclick">change</button>
</div>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			seen:true
		},
		methods:{
			handleclick:function(){
				this.seen = !this.seen
			}
		}
	})
</script>
</body>
<!--
animate.css
强大的css3动画库
--------------------
开始自动加载出场动画一次
appear:英文直译:登场,出现
appear-active-class="swing"
-------------------------
type = "transition"
如果animate和transition时间不一致可用type规定以谁为准
以transition的时常为准
-----------------------
自定义设置整体动画时长
:duration = "10000" //10秒
自定义设置整体动画进入和离开的动画时常
:duration = "{enter:5000,leave:10000}" //进入5秒,离开10秒
-->
</html>